<template>
    <div class="common trainingProgram">
        <innerCommon 
            :location="location"
        >
            <template slot="left">
                <span>方案列表</span>
                <a-select 
                    style="width:200px"
                    @change="handleChange" 
                    allow-clear 
                    placeholder="请选择教育阶段"
                    >
                        <a-select-option :value="item.id" v-for="(item,index) in eduList" :key="index">
                            {{item.name}}
                        </a-select-option>
                </a-select>
                <a-input-search class="inputStyle" style="margin-left:10px;" placeholder="搜索名称" enter-button @search="onSearch" v-model="searchValue" />
            </template>
            <div slot="right">
                <a-button type="primary" @click="toAdd()">新增</a-button>
            </div>
            <div slot="table" class="tableWrap">
                <a-table 
                    size="middle"
                    :columns="columns" 
                    :data-source="list" 
                    :pagination="pagination"
                    :rowKey="record=>record.id"
                    @change="changePage"
                    :locale="{'emptyText': '暂无数据'}"
                    bordered>
                    <div slot="edPhase" slot-scope="index,record">
                        <span v-if="record.edPhase==0">中职</span>
                        <span v-else-if="record.edPhase==1">高职</span>
                        <span v-else>本科</span>
                    </div>
                    <div slot="status" slot-scope="index,record">
                        <span v-if="record.status==0" style="color:red">未发布</span>
                        <span v-else style="color:green">已发布</span>
                    </div>
                    <div slot="action" slot-scope="index,record" class="tableAction">
                        <span @click="editProgram(record.id)">修改</span>
                        <confirmBox
                            @handleOk="deleteProgram(record.id)"
                            :typeName="'删除'"
                            :noticeInfo="record.title"
                            :noticeType="'方案'"
                        ></confirmBox>
                        <confirmBox
                            @handleOk="publish(record.id)"
                            v-if="record.status==0"
                            :typeName="'发布'"
                        ></confirmBox>
                        <confirmBox
                            @handleOk="stayAtTop(record)"
                            :typeName="record.stayAtTop==0?'置顶':'取消置顶'"
                        ></confirmBox>
                    </div>
                </a-table>
            </div>
        </innerCommon>
    </div>
</template>
<script>
const columns=[
    {
        title: '序号',
        dataIndex: 'index',
        width:70
    },{
        title: '方案名称',
        dataIndex: 'title'
    },{
        title: '教育阶段',
        scopedSlots: { customRender: 'edPhase' },
    },{
        title: '所属专业方向',
        dataIndex: 'major'
    },{
        title: '发布者',
        dataIndex: 'pubName'
    },{
        title: '发布时间',
        dataIndex: 'pubTime',
        width:200
    },{
        title: '发布状态',
        scopedSlots: { customRender: 'status' },
        width:100
    },{
        title: '操作',
        scopedSlots: { customRender: 'action' },
        width:220
    }
]
import innerCommon from "@/components/common/innerCommon"
import confirmBox from "@/components/common/confirmBox"
import {getTrainingProgramListApi,deleteProgramApi,publishProgramApi,programStayAtTopApi} from "@/request/api"
export default {
    name:"trainingProgram",
    components:{innerCommon,confirmBox},
    created(){
        this.location=[{
            name:"教学课堂管理",
            path:''
        },{
            name:"人才方案管理",
            path:'/trainingProgram'
        }]
        this.init()
    },
    watch:{
        searchValue:function(val){
            this.searchValue=val.trim()
        }
    },
    data(){
        return{
            columns,
            list:[],
            location:[],
            searchInfo:{
                page:1,
                pageSize:10,
                edPhase:null,
                keyword:''
            },
            pagination:{pageSize:10,total:0,current:1},
            eduList:[{name:'中职',id:0},{name:'高职',id:1},{name:'本科',id:2}],
            searchValue:''
        }
    },
    methods:{
        init(){
            this.getToken(getTrainingProgramListApi,this.searchInfo,res=>{
                this.list=res.data.rows.map((item,index)=>({...item,index:(this.searchInfo.page-1)*10+index+1,'pubName':item.publisher&&item.publisher.name,'major':item.major.name}))
                this.pagination.total=res.data.count
            })
        },
        changePage(data){
            this.searchInfo.page=data.current
            this.pagination.current=data.current
            this.init()
        },
        toAdd(){
            this.$router.push({path:'/trainingProgramAdd'})
        },
        editProgram(id){
            this.$router.push({path:'/trainingProgramAdd',query:{id}})
        },
        deleteProgram(id){
            this.getToken(deleteProgramApi,{programId:id},res=>{
                this.$message.success(res.message)
                this.init()
            })
        },
        publish(id){
            this.getToken(publishProgramApi,{programId:id},res=>{
                this.$message.success(res.message)
                this.init()
            })
        },
        stayAtTop(data){
            this.getToken(programStayAtTopApi,{'programId':data.id,'stayAtTop':data.stayAtTop==0?1:0},res=>{
                this.$message.success(res.message)
                this.init()
            })
        },
        handleChange(data){
            this.searchInfo.edPhase=data
            this.searchInfo.page=1
            this.pagination.current=1
            this.init()
        },
        onSearch(data){
            this.searchInfo.keyword=data
            this.searchInfo.page=1
            this.pagination.current=1
            this.init()
        }
    }
}
</script>
